<template>
  <view class="forget">
    <view class="content" style="padding-top: 20%">
      <!-- 主体 -->
      <view class="main">
        <wInput v-model="phoneData" type="text" maxlength="11" placeholder="请输入手机号码"></wInput>
        <wInput v-model="passData" type="password" maxlength="11" placeholder="请输入新密码" isShowPass></wInput>
        <wInput v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode codeText="获取重置码" setTime="120" ref="runCode" @setCode="getVerCode()"></wInput>
      </view>
      <view class="flex flex-center" @click="startRePass()">
        <wButton class="wbutton" text="重置密码" bgColor="linear-gradient(to right, #0081ff, #4096f3)" :rotate="isRotate"></wButton>
      </view>
    </view>
  </view>
</template>

<script>
let _this;
import wInput from '../../components/watch-login/watch-input.vue'; //input
import wButton from '../../components/watch-login/watch-button.vue'; //button
export default {
  data() {
    return {
      phoneData: '', //电话
      passData: '', //密码
      verCode: '', //验证码
      isRotate: false, //是否加载旋转
      barHeight: 0
    };
  },
  components: {
    wInput,
    wButton
  },
  onLoad() {
    this.barHeight = uni.getSystemInfoSync().statusBarHeight;
  },
  mounted() {
    _this = this;
  },
  methods: {
    backone() {
      uni.navigateBack({
        delta: 1
      });
    },
    gohome() {
      uni.navigateTo({
        url: '../index/index'
      });
    },
    getVerCode() {
      //获取验证码
      if (_this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确'
        });
        return false;
      }
      console.log('获取验证码');
      uni.request({
        method: 'post',
        header: { Authorization: '' },
        url: _this.app.apiHost + '/sendGetCode',
        data: { phone: _this.phoneData },
        success: (data) => {
          _this.isfa = true;
          console.log(data);
          if (data.data.code == 0) {
            _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
            _this.app.showMsg('发送成功');
          } else if (data.data.code == 2) {
            _this.$refs.runCode.$emit('runCode', parseInt(data.data.time));
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          } else {
            _this.$refs.runCode.$emit('runCode', 0);
            uni.showToast({
              title: data.data.msg,
              icon: 'error',
              position: 'bottom'
            });
          }
        },
        fail(a) {
          _this.$refs.runCode.$emit('runCode', 0);
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    },
    startRePass() {
      //重置密码
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      if (this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确'
        });
        return false;
      }
      if (this.passData.length < 6) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '密码不正确'
        });
        return false;
      }
      if (this.verCode.length != 6) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '验证码不正确'
        });
        return false;
      }
      _this.isRotate = true;
      uni.request({
        url: _this.app.apiHost + '/restpass',
        method: 'POST',
        header: { Authorization: '' },
        data: { code: _this.verCode, mobile: _this.phoneData, pass: _this.passData },
        success: function (res) {
          if (res.data.code == 0) {
            _this.app.showMsg('修改成功!', '../login/login');
          } else {
            _this.isRotate = false;
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              position: 'bottom'
            });
          }
        }
      });
    }
  }
};
</script>
<style>
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');
.dfan {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  border: 1px solid #c1c1c1;
  padding: 3px 5px;
}
</style>
